.containerscreen {
  position: absolute;
  height: 100%;
  width: 100%;
}
.login {
  .ant-input-affix-wrapper {
    background-color: transparent;
  }
  .change-effects {
    border-color: white;
    border-width: 3px;
    position: absolute;
    z-index: 10;
    left: 50%;
    transform: translateX(-50%);
  }
  &-innercontainer {
    transform-style: preserve-3d;
    transition: transform 1s;
    height: 360px;
    width: 400px;
    // overflow: hidden;
    // &:hover {
    //   transform: translateZ(-180px) rotateX(90deg);
    // }
  }

  &-container {
    position: absolute;
    z-index: 10;
    left: 50%;
    top: 50%;
    margin-top: -180px;
    margin-left: -200px;
    // overflow: hidden;
    height: fit-content;
    .ant-input-group-addon {
      background-color: transparent;
      border: none;
    }
    // height: 300px;
    .loginform {
      position: absolute;
      top: 0;
      transform: translateZ(180px);
      border-top-left-radius: 50px;
      border-top-right-radius: 50px;
      background-image: -webkit-linear-gradient(
        to left top,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.1) 5%,
        rgba(0, 0, 0, 0.9) 10%,
        rgba(0, 0, 0, 0.5) 800%,
        rgba(0, 0, 0, 0.2) 95%,
        rgba(0, 0, 0, 0.1) 100%
      );
      background-image: linear-gradient(
        to right bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.1) 5%,
        rgba(0, 0, 0, 0.9) 10%,
        rgba(0, 0, 0, 0.4) 70%,
        rgba(0, 0, 0, 0.1) 95%,
        rgba(0, 0, 0, 0) 100%
      );
      border: none;
    }
    .registForm {
      border-bottom-left-radius: 50px;
      border-bottom-right-radius: 50px;
      position: absolute;
      top: 0;
      transform: rotateX(-90deg) translateZ(180px);
      background-image: -webkit-linear-gradient(
        to left bottom,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.1) 5%,
        rgba(0, 0, 0, 0.9) 10%,
        rgba(0, 0, 0, 0.5) 800%,
        rgba(0, 0, 0, 0.2) 95%,
        rgba(0, 0, 0, 0.1) 100%
      );
      background-image: linear-gradient(
        to right top,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.1) 5%,
        rgba(0, 0, 0, 0.9) 10%,
        rgba(0, 0, 0, 0.4) 70%,
        rgba(0, 0, 0, 0.1) 95%,
        rgba(0, 0, 0, 0) 100%
      );
      border: none;
    }
    .ant-card {
      background-color: transparent;
      height: 360px;

      .ant-card-head {
        border-bottom: none;
        &-title {
          text-align: center;
          font-weight: 700;
          color: #d7e0f8;
          font-size: 20px;
        }
      }
      .ant-card-body {
        .ant-btn-background-ghost.ant-btn-primary:hover {
          background-color: #69b7ff !important;
          color: whitesmoke;
          border-color: #69b7ff;
        }
        .ant-col {
          right: 0%; // 过渡设置初始值 否则transition没有效果
          transition: all 0.5s;
        }
        .ant-form-item {
          margin-bottom: 30px;
        }
        .ant-form-item-explain {
          position: absolute;
          left: 300px;
          top: -52px;
        }
        .ant-col-pull-1 {
          right: 4.16666667%; // 重新设置 否则会覆盖 因为都是 外联样式 有层级覆盖的问题
        }
        background-color: transparent;
        .ant-form-item-control-input-content {
          text-align: center;
          margin: 0 auto;
          // max-width: 80%;
        }
        input {
          color: #a8a5a7;
        }
        .ant-input-affix-wrapper {
          transition: all 0.3s;
        }
        .ant-btn-background-ghost {
          border-radius: 20px;
          margin: 0 20px;
          span {
            padding: 0 15px;
          }
        }
        .currentBtn {
          border-color: #9dff00;
          // background-color: #4fb8fe!important;
          color: #a8a5a7;
        }
        .currentBtn:hover {
          background-color: #23d18b !important;
          color: white;
        }
        .hasclass {
          border: 1px solid transparent;
          color: #252526;
        }
        .hasclass:hover {
          color: #4fb8fe;
        }
        .ant-input {
          background-color: transparent;
          border: none;
          color: #d7e0f8;
        }
      }
    }
  }
}
.loginModal {
  // animation: geet 0.2s linear infinite both;
  transform: scale(1);
  transition: all 1s;
  .ant-modal-title {
    text-align: center;
    user-select: none;
  }
  .picCanvas {
    
    .error {
      position: absolute;
      bottom:-30px;
      background-color: #de715b;
      opacity: 0.8;
      width: 100%;
      color:white ;
      font-size: 20px;
      height: 30px;
      line-height: 30px;
      font-weight: 700;
      text-indent: 15px;
      transition: all .5s;
    }
    .success {
      position: absolute;
      bottom: -30px;
      background-color: #40ea77;
      width: 100%;
      color:white ;
      font-size: 20px;
      height: 30px;
      line-height: 30px;
      transition: all .5s;
      font-weight: 700;
      text-indent: 15px;
    }
    .picontainer {
      overflow: hidden;
      width: 472px;
      height: 236px;
      position: relative;
      margin-bottom: 10px;
      .back {
        position: absolute;
        top: 0;
        left: 0;
      }
      .front {
        position: absolute;
        top: 0;
        left: 0;
      }
    }
    .ant-btn:hover .icon-shuaxin1 {
      transform: rotate(-360deg);
    }
    .icon-shuaxin1 {
      transform: rotate(0);
      transition: all 1s;
    }
    margin-bottom: 15px;
  }
  .process {
    line-height: 46px;
    width: 450px;
    height: 46px;
    text-align: center;
    background-color: #dfe1e2;
    border-radius: 23px;
    margin: 0 auto;
    position: relative;
    border: 1px solid #dfe1e2;
    box-shadow: 0 1px 1px rgba(12, 10, 10, 0.2) inset;
    .scrollbg {
      background-color: transparent;
      background-image: linear-gradient(to right, black, black, white, black, black, white, black);
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
      -webkit-background-size: 200% 100%;
      animation: textmove 3s infinite linear;
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      color: #88949d;
      text-align: center;
      user-select: none;
      transition: all 0.5s;
      opacity: 1;
    }

    .huakuai {
      position: absolute;
      top: -9px;
      left: 0;
      height: 60px;
      width: 60px;
      border-radius: 30px;
      font-size: 0;
      border: 2px solid #c0bbbb;
      box-shadow: 5px 5px 5px 5px #c0bbbb inset;
      background-image: url(/images/bili.gif);
      background-position: -6px 12.79625%;
      background-size: 477.93939%;
      background-repeat: no-repeat;
      // transition: all 1s;
      cursor: pointer;
    }
    .huakuai:after {
      content: "";
      display: block;
      position: absolute;
      bottom: -20px;
      left: 20%;
      height: 10px;
      width: 60%;
      background: #ccc;
      border-radius: 50%;
      box-shadow: 0 0 5px 3px #ccc;
      transform: translateY(1);
    }
  }
  .ant-modal-footer {
    text-align: center !important;
  }
}

.ant-modal-confirm-success {
  .ant-result-title {
    color:#64cb02
  }
  .ant-modal-confirm-btns {
    display: none;
  }
}
@keyframes textmove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}

@keyframes geet {
  0% {
    margin-left: -20px;
  }
  75% {
    margin-left: 20px;
  }
  100% {
    margin-left: 0;
  }
}